<template>
    <div id="main">
        <div class="navbar11 navbar-inverse">
            <table class="title">
                <tr id="title_tr">
                    <td style="width: 60%"><a href="#/setting" id="titleText">在 线 购 物 系 统</a></td>
                    <td style="width: 10%" class="title_td">
                      <a class="astyle" v-on:click="index('发布商品')" v-if="flag">发布商品</a>
                      <el-link class=".astyle2" style="font-size: xx-large" disabled><a v-if="!flag">发布商品</a></el-link>
                    </td>
                    <td style="width: 10%" class="title_td"><a class="astyle" v-on:click="index('历史商品')">历史商品</a></td>
                    <td style="width: 10%" class="title_td"><a class="astyle" v-on:click="index('购买人信息')">购买人</a></td>
                    <td style="width: 10%" class="title_td"><a class="astyle" v-on:click="index('商品状态')">处理商品</a></td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    name: "top",
    data() {
      return {
        flag : true
      }
    },
    methods: {
      index: function (value) {
        if (value === "商品状态") {
          this.$router.push({
            name: 'temp',
            params: {
              'value': '商品状态'
            }
          })
        } else if (value === "历史商品") {
          this.$router.push({
            name: 'temp',
            params: {
              'value': '历史商品'
            }
          })
        } else if (value === "购买人信息") {
          this.$router.push({
            name: 'temp',
            params: {
              'value': '购买人信息'
            }
          })
        } else if (value === "发布商品") {
          this.$router.push({
            name: 'upload',
            params: {
              'value': '发布商品'
            }
          })
        }
      }
    },
  created() {
    this.$http.post("http://rap2api.taobao.org/app/mock/293261/home/data").then((res) =>{
      this.flag = res.data.goods[0].freeze;
    })
  }
}
</script>

<style scoped>
#main {
    background-size: 100% 100%;
    height: 100%;
    position: fixed;
    width: 100%
}
.navbar11 {
    margin: 0 auto;
    margin-bottom: 0;
    position: fixed;
    left: 20px;
    right: 20px;
    z-index: 9999;
}
.sidebar {
    background: lightslategray;
    padding: 0;
    position: fixed;
    top: 15%;
    width: 10%;
    /*bottom: 15%;*/
}
.content {
    position: fixed;
    top: 15%;
    right: 0;
    bottom: 0;
    overflow: scroll;
}

table.title{
    position: fixed;
    width: 98%;
    height: 10%;
    margin: 0 auto;
    top: 0;
    text-align: center;
    background-color: #037bd2;
}
#title{
    font-size: xxx-large;
    color: whitesmoke;
}
button.title_button{
    background-color: #037bd2;
    font-size: xx-large;
    color: whitesmoke;
    transition-duration: 0.4s;
    border: none;
    width: 100%;
}
.title_button:hover{
    /*background-color: lightblue; !* Green *!*/
    color: lightgray;
}
.title_button:active{
    /*background-color: lightblue; !* Green *!*/
    color: lightslategrey;
    border: none;
}
#title_tr{
    color: #037bd2;
    border-style: none;
}
td.title_td{
    border-style: none;
}
span{
    text-align: center;
}
img{
    border-radius: 20px;
    width: 100px;
    height: 100px;
}
#imglist{
    text-align: center;
}
#imglist img{
    float: left;
}
.left:hover{
    background-color: slategrey;
}
a.astyle{
    background-color: #037bd2;
    font-size: xx-large;
    color: whitesmoke;
    transition-duration: 0.4s;
    border: none;
    width: 100%;
    text-decoration: none;
    cursor:pointer
}
.astyle2{
  background-color: #037bd2;
  font-size: xx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
  text-decoration: none;
  cursor:pointer
}
.astyle:hover{
    color: lightgray;
}
input.dj{
    width: 30%;
    margin: 0 auto;
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    margin-top: 5%;
    padding: 5px 10px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
}
.dj:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #99eab7;
    transform: translateY(4px);
    border: none;
}
.but1 {
    margin: 0 auto;
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    margin-top: 5%;
    padding: 5px 10px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
}
.but1:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #99eab7;
    transform: translateY(4px);
}
td{
    margin: 0 auto;
    margin-top: 5%;
}
#titleText{
    background-color: #037bd2;
    font-size: xxx-large;
    color: whitesmoke;
    transition-duration: 0.4s;
    border: none;
    width: 100%;
    text-decoration: none;
    cursor:pointer
}
.s1 {
    display: inline-block;
    height: 40px;
    width: 40px;
    color: white;
    font-size: x-large;
    background: rgba(135, 206, 250, 1);
    border: 1px solid lightgray;
    cursor: pointer;
    line-height: 40px;
}
.s1:hover {
    background: rgba(135, 206, 250, 0.7);
    box-shadow: white inset 0 0;
}
.s2 {
    display: inline-block;
    height: 40px;
    width: 100px;
    color: white;
    font-size: x-large;
    background: rgba(135, 206, 250, 1);
    border: 1px solid lightgray;
    cursor: pointer;
    line-height: 40px;
}
.s2:hover {
    background: rgba(135, 206, 250, 0.7);
    box-shadow: white inset 0 0;
}
.s3 {
    display: inline-block;
    height: 40px;
    color: black;
    font-size: x-large;
    line-height: 40px;
}
.btu2 {
    border: none;
    border-radius: 10px;
    color: white;
    font-size: large;
    background: rgba(135, 206, 250, 1);
}
.table {
    margin: 0 auto;
    border: 2px solid steelblue;
    text-align: center;
    width: 1000px;
    /*height: 600px;*/
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px 10px 0 0;
    line-height: 50px;
}
.tr1 {
    background: steelblue;
    border-radius: 10px;
    border: 2px solid steelblue;
    color: white;
    font-family: "Microsoft Himalaya", sans-serif;
    text-align: center;
}
.tr2 {
    background: white;
    font-family: "Microsoft Himalaya", sans-serif;
    color: #4F4F4F;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0);
}
.tr2:hover {
    background: rgba(79, 79, 79, 0.3);
}
</style>
